//审核详情页
<template>
<div>
    <common-header
        :title="title"
        :type=3></common-header>
    <div class="mui-content">
        <div class="swipe-div">
            <mt-swipe :auto="0">
                <mt-swipe-item class="slide1" v-for="(img, index) in imgList" :key="index">
                    <a href="javascript: void(0)">
                        <img :src="img" preview="0"/>
                    </a>
                </mt-swipe-item>
            </mt-swipe>
        </div>
        <div class="audit-details">
            <ul>
                <li>
                    <p class="audit-details-title">样衣编号:</p>
                    <p class="audit-details-conts">{{ data.sampleId }}</p>
                </li>
                <li>
                    <p class="audit-details-title">大类:</p>
                    <p class="audit-details-conts">{{ data.dlText }}</p>
                </li>
                <li>
                    <p class="audit-details-title">货号:</p>
                    <p class="audit-details-conts">{{ data.pcode }}</p>
                </li>
                <li>
                    <p class="audit-details-title">小类:</p>
                    <p class="audit-details-conts">{{ data.xlText }}</p>
                </li>
                <li>
                    <p class="audit-details-title">波段号:</p>
                    <p class="audit-details-conts">{{ data.bandname }}</p>
                </li>
                <li>
                    <p class="audit-details-title">合作方式:</p>
                    <p class="audit-details-conts">{{ data.jyfs }}</p>
                </li>
                <li>
                    <p class="audit-details-title">供货商编码:</p>
                    <p class="audit-details-conts">{{ data.supplierid }}</p>
                </li>
                <li>
                    <p class="audit-details-title">供货商:</p>
                    <p class="audit-details-conts">{{ data.vendername }}</p>
                </li>
            </ul>
        </div>
        <div class="audit-regula">
            <div class="audit-regula-title">
                <h1>审核条款</h1>
                <div class="mui-checkbox check">
                    全选<input class="audit-details-check" v-model="checked" @change="checkAll" name="checkbox1" type="checkbox">
                </div>
            </div>
            <div class="audit-regula-cont">
                <ul>
                    <li v-for="(item, index) in checkList" :key="index">
                        <div class="mui-input-row mui-checkbox audit-details-box">
                            <label>{{ item.checkinfo }}</label>
                            <input class="audit-details-check" :value="item.seqno" v-model="checkState" name="checkbox1" type="checkbox">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="audit-button">
            <ul>
                <li class="audit-false">
                    <button type="button" @click="submit(-1)" class="mui-btn" :disabled="checked" :class="{ 'mui-btn-blue': !checked}">不通过</button>
                </li>
                <li class="audit-deter">
                    <button type="button" @click="submit(0)"  class="mui-btn" :disabled="!checked" :class="{ 'mui-btn-yellow': checked}">待定</button>
                </li>
                <li class="audit-sure">
                    <button type="button" @click="submit(1)" class="mui-btn" :disabled="!checked" :class="{ 'mui-btn-blue': checked}">通过</button>
                </li>
            </ul>
        </div>
    </div>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import commonHeader from '@/components/commonHeader.vue'
import { Swipe, SwipeItem } from 'mint-ui';
import API from '@/service/api'
export default {
    components: { commonHeader, Swipe, SwipeItem },
    data() {
        return {
            title: '照片审核',
            data: {},
            imgList: [],
            checked: false,
            checkList: [],//检查标准列表
            checkState: [],//检查状态
        }
    },
    computed: {
        ...mapState( [ 'sample_id', 'sample_no' ] ) 
    },
    watch: {
        checkState: {
            handler(val, oldVal){
                if (this.checkState.length === this.checkList.length) {
                    this.checked=true
                }else{
                    this.checked=false
                }
            },
            deep: true
        }
    },
    methods: {
        ...mapMutations( [ 'UPDATE_SHOW_LOADING' ] ),
        checkAll() {//全选与反选
            if (!this.checked) {//实现反选
                this.checkState = []
            }else{//实现全选
                let checks = []
                this.checkList.forEach(item=> {
                    checks = [...checks, item.seqno]
                })
                this.checkState = checks
            }
        },
        async initialization() {
            //获取基本信息
            this.data = await API.currency.getSampleDetail({ ID: this.sample_no })
            //获取样衣图片列表
            let imgs = await API.currency.getSampleImgs({ sampleId: this.sample_id })
            for(let i = 1; i<6; i++) {
                const img = imgs[`limg${i}`]
                if(img)
                    this.imgList.push(img)
            }
            //启动图片预览
            this.$previewRefresh()
            API.dic.getPhotoCheckList().then(res=> {
                this.checkList = res
            })
            this.UPDATE_SHOW_LOADING(false)
        },
        //提交
        submit(status) {
            this.UPDATE_SHOW_LOADING(true)
            this.checkList.forEach(row=> {
                if(this.checkState.contains(row.seqno)) row.checkflag = 1
            })
            let data = {
                SampleIds: this.sample_id,
                PhotoModels: this.checkList
            }
            API.ckphoto.checkPhoto(data, status).then(res=> {
                this.UPDATE_SHOW_LOADING(false)
                if(res.code == 1) {
                    setTimeout(()=>{
                        this.$router.push( { name: 'ckphoto' } )
                    },1000)
                    this.$success()
                }else {
                    this.$error(res.errMsg)
                }
            })
        },
    },
    created() {
       this.initialization()
    } 
}
</script>
<style lang="less" scoped>
.audit-regula-title{
    h1{
        width: 50%;
        float: left;
    }
    .check {
        text-align: right;
        width: 50%;
        display: block;
        float: left;
        padding-right: 50px;
        margin-top: -7px;
        .audit-details-check {
            top: -3px!important;
        }
    }

}
.audit-button{
    .mui-btn {
        background-color: #f1f1f1 !important;
        color: #888888;
    }
    .mui-btn-blue {
        background-color: #0062cc !important;
        color: #ffffff
    }
    .mui-btn-yellow {
        background-color: #ffaf00 !important;
        color: #ffffff
    }
}
</style>